<template>
  <view class="Box">
    <view v-if="orderStatus == 1" class="VerificationCodeBox">
      <view class="VerificationCode">
        核销码
      </view>
      <view class="imgBox">
        <img v-if="imgData" :src="imgData" alt="" class="WriteOffImg"/>
        <u-loading-icon v-else></u-loading-icon>
      </view>
    </view>
    <view class="numberBox">
      <view class="number">
        <view class="numberLeft">
          订单编号
        </view>
        <view class="numberRight">
          {{ storageData.order.orderNum }}
        </view>
      </view>
      <view class="numberItem">
        <view class="itemLeft">
          下单时间
        </view>
        <view class="itemRight">
          {{ storageData.order.createTime }}
        </view>
      </view>
      <view v-if="orderStatus != 0" class="numberItem">
        <view class="itemLeft">
          支付时间
        </view>
        <view class="itemRight">
          {{ storageData.order.payTime }}
        </view>
      </view>
      <view v-if="orderStatus != 0" class="numberItem">
        <view class="itemLeft">
          支付金额
        </view>
        <view class="itemRight">
          ￥{{ storageData.orderItem.fen / 100 }}
        </view>
      </view>
    </view>

    <view class="ProductsBox">
      <view class="Products">
        <image :src="storageData.orderItem.shopSundry.dishesImg" class="positionImg">
        </image>
        <view class="titleBox">
          <view class="title">
            {{ storageData.orderItem.shopSundry.dishesName }}
          </view>
          <view class="price">
            ￥{{ storageData.orderItem.shopSundry.price }}/{{ storageData.orderItem.shopSundry.specification }}
          </view>
        </view>
      </view>
    </view>
    <view class="NumberOfTravelers">
      <view class="NumberOfTravelers-text">数量</view>
      <view class="">
        {{ storageData.orderItem.payCount }}
      </view>
    </view>

    <view class="shopBox">
      <view class="title">
        店铺信息
      </view>
      <view class="shop">
        <image :src="storageData.shopImgList[0]" class="shopImg">
        </image>
        <view class="shopRight">
          <view class="shopName">
            <view class="name">
              {{ storageData.shopName }}
            </view>
            <view v-if="storageData.type == 1" class="shopType">餐饮</view>
            <view v-if="storageData.type == 2" class="shopType">住宿</view>
            <view v-if="storageData.type == 3" class="shopType">零售</view>
            <view v-if="storageData.type == 4" class="shopType">平台</view>
          </view>
          <view class="shopTag">
            <view v-for="(item,index) in storageData.tag" :key="index" class="">
              <view class="tagItem">
                {{ item }}
              </view>
            </view>
          </view>
        </view>

      </view>
    </view>
    <view class="separateBox">

    </view>
    <!-- <view class="payment">
      <view class="paymentFee">
        <view class="totalPrice">总价 ¥</view>
        <view class="wordSize">{{storageData.orderItem.fen / 100}}</view>
      </view>

    </view> -->
    <view class="TotalPrice">
      <view class="TotalPriceBox">
        <view class="Price">
          <view class="PriceLeft">
            总价￥
          </view>
          <view class="PriceRight">
            {{ storageData.orderItem.fen / 100 }}
          </view>
        </view>
        <view v-if="orderStatus == 0" class="confirmBox" @click="confirmEvent">
          确认支付
        </view>
        <view v-if="orderStatus == 1" class="confirmBox refund" @click="refundClick">
          申请退款
        </view>


        <view v-if="orderStatus == 3 && storageData.order.refundStatus == 'SUCCESS'" class="AuditingBox">
          退款成功
        </view>
        <view v-if="orderStatus == 3 && storageData.order.refundStatus == 'CLOSED'" class="AuditingBox">
          退款已拒绝
        </view>
        <view v-if="orderStatus == 3 && storageData.order.refundStatus == 'PROCESSING'" class="AuditingBox">
          退款处理中
        </view>
        <view v-if="orderStatus == 3 && storageData.order.refundStatus == 'ABNORMAL'" class="AuditingBox">
          退款异常
        </view>
        <view v-if="orderStatus == 3 && storageData.order.refundStatus == 'CLOSED'" class="confirmBox refund"
              @click="refundClick">
          重新申请退款
        </view>
      </view>

    </view>
    <u-popup :show="refundShow" mode="center">
      <view class="refundBox">
        <view class="">
          <view class="refundText"> 退款原因</view>
          <u--textarea v-model="refundReason" placeholder="请输入"></u--textarea>
        </view>
        <view class="buttonBox">
          <view class="itemBox cancelBox" @click="cancelRefund">
            取消
          </view>
          <view class="itemBox sumbitBox" @click="sumbitClick">
            提交退款申请
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  querySundryOrderInfo,
  gainQrcode,
  refundInput,
  getSign,
  postOrder
} from "@/api/challenge";

export default {
  data() {
    return {
      storageData: {},
      imgData: '',
      refundShow: false,
      orderStatus: '',
    }
  },
  onLoad(data) {
    this.orderStatus = data.orderStatus
    gainQrcode({
      skipUrl: "pages/my/orderList/productVerification",
      scene: data.id,
	  // // 聚力
	  appId: "wx5b3843197d34d53b",
    }).then((res) => {
      this.imgData = "data:image/png;base64," + res;
    });
    querySundryOrderInfo({
      orderId: data.id
    }).then(params => {
      var idynamicTags = []
      params.tag.split(",").forEach((params, index) => {
        if (params != '') {
          idynamicTags.push(params)
        }
      })
      params.tag = idynamicTags
      this.storageData = params
    })
  },
  methods: {
    cancelRefund() {
      this.refundShow = false;
    },
    refundClick() {
      this.refundShow = true;
      this.refundReason = '';
    },
    sumbitClick() {
      if (this.refundReason == "") {
        uni.$u.toast("请输入退款原因");
      } else {
        refundInput({
          orderNum: this.storageData.order.orderNum,
          refundReason: this.refundReason,
        }).then((res) => {
          uni.$u.toast("退款审核提交成功");
          this.refundShow = false;
          this.orderStatus = 3
          this.storageData.order.refundStatus == 'PROCESSING'
        });
      }
    },
    confirmEvent() {
      getSign({
        prepayId: this.storageData.order.prepayId,
		// // 聚力
		appId: "wx5b3843197d34d53b",
      }).then(params => {
        wx.requestPayment({
          timeStamp: params.data.timeStamp,
          nonceStr: params.data.nonceStr,
          package: params.data.package,
          signType: params.data.signType,
          paySign: params.data.paySign,
          success: function (successres) {
            postOrder({
              orderSn: this.storageData.order.orderNum,
              orderAmount: 1,
              payStatus: 1,
            }).then((completeres) => {
              console.log("查询完成", completeres);
            });
            uni.reLaunch({
              url: '/pages/PopularRoute/payStatus?type=1&lineType=0&orderType=2'
            })
          },
          fail: function (failres) {
            console.log(failres);
            uni.reLaunch({
              url: '/pages/PopularRoute/payStatus?type=2&lineType=0&orderType=2'
            })
          },
          complete: function (completeres) {
            console.log("完成", completeres);
          },
        });
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.Box {
  width: 100%;
  background: #f2f2f2;
  padding-top: 32rpx;
  font-family: PingFang SC, PingFang SC-Heavy;

}

.numberBox {
  margin: 0 32rpx;
  background-color: #fff;
  padding: 0 20rpx 10rpx 20rpx;
  border-radius: 20rpx;

  .number {
    display: flex;
    justify-content: space-between;
    padding: 32rpx 0 18rpx 0;

    .numberLeft {
      font-weight: 800;
    }


  }

  .numberItem {
    display: flex;
    justify-content: space-between;
    border-top: 2rpx solid #eeeeee;
    font-size: 28rpx;
    color: #757575;
    padding: 22rpx 0 18rpx 0;
  }
}

.VerificationCodeBox {
  margin: 0 32rpx 32rpx 32rpx;
  background-color: #fff;
  padding: 32rpx;

  .VerificationCode {
    font-weight: 800;
    margin-bottom: 32rpx;
  }

  .imgBox {
    width: 300rpx;
    height: 300rpx;
    margin: auto;

    .WriteOffImg {
      width: 300rpx;
      height: 300rpx;
    }
  }
}

.ProductsBox {
  padding-top: 32rpx;

  .Products {
    background-color: #fff;
    margin: 0rpx 32rpx 32rpx 32rpx;
    display: flex;
    padding: 20rpx;
    border-radius: 20rpx;

    .positionImg {
      width: 152rpx;
      height: 152rpx;
    }

    .titleBox {
      margin-left: 20rpx;

      .title {
        font-weight: 800;
        color: #212121;
      }

      .price {
        color: #ff0000;
        margin-top: 20rpx;
      }
    }
  }
}

.NumberOfTravelers {
  display: flex;
  justify-content: space-between;
  margin: 0 32rpx;
  background-color: #fff;
  padding: 32rpx;
  border-radius: 20rpx;

  .NumberOfTravelers-text {
    font-weight: 800;
  }
}

.shopBox {
  margin: 32rpx;
  padding: 32rpx 0 32rpx 32rpx;
  background-color: #fff;
  border-radius: 20rpx;

  .title {
    font-weight: 800;
  }

  .shop {
    display: flex;
    padding-top: 20rpx;

    .shopImg {
      width: 110rpx;
      height: 110rpx;
      border-radius: 16rpx;
    }

    .shopRight {
      margin-left: 20rpx;

      .shopName {
        display: flex;

        .name {
          font-weight: 800;
        }

        .shopType {
          font-size: 24rpx;
          color: #ff9802;
          border: 2rpx solid #ff9802;
          border-radius: 22rpx;
          padding: 0 14rpx;
          line-height: 38rpx;
          margin-left: 10rpx;
        }
      }

      .shopTag {
        display: flex;
        margin-top: 20rpx;
        overflow: hidden;


        .tagItem {
          font-size: 24rpx;
          padding: 2rpx 8rpx;
          background: #cccccc;
          border-radius: 4px;
          color: #fff;
          margin-right: 12rpx;
          white-space: nowrap;
        }
      }
    }
  }
}

.separateBox {
  padding-bottom: 200rpx;
}

.TotalPrice {
  width: 100%;
  height: 100rpx;
  position: fixed;
  bottom: 0;
  background: #fff;

  .TotalPriceBox {
    height: 100rpx;
    padding: 0 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .Price {
      display: flex;
      color: #ff0202;
      align-items: center;

      .PriceLeft {
        font-size: 24rpx;
      }

      .PriceRight {
        font-size: 36rpx;
      }
    }

    .confirmBox {
      padding: 0 28rpx;
      height: 64rpx;
      background: #4186f5;
      border-radius: 32rpx;
      color: #fff;
      text-align: center;
      line-height: 64rpx;
    }

    .refund {
      background: #ff5e5e;
    }

    .AuditingBox {
      color: #ff5e5e;
    }

  }

}


.refundBox {
  width: 600rpx;
  height: 340rpx;
  padding: 20rpx;
  border-radius: 20rpx;

  .refundText {
    font-weight: 800;
    margin: 10rpx 0;
  }

  .buttonBox {
    display: flex;
    justify-content: space-around;
    margin-top: 30rpx;

    .itemBox {
      width: 220rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      color: #fff;
      border-radius: 10rpx;
    }

    .cancelBox {
      background: #81d3f8;
    }

    .sumbitBox {
      background: #d9001b;
    }
  }
}
</style>
